import React, { Component} from 'react'
import PropTypes from 'prop-types'
import {
    List, Grid,
} from 'antd-mobile'

export default class headerSelect extends Component{

    constructor(){
        super()
        this.headerImg = []
        for (var i = 0; i < 20; i++){
            this.headerImg.push({
                //wabpack不仅支持 ES6模块化
                //也支持 commonjs 模块化
                icon: require(`../../assets/images/头像${i+1}.png`),
                text: "头像" +(i+1)
            })
        }
    }
    state = {
        icon: require(`../../assets/images/init.png`),
        flag: false
    }

    static propTypes = {
        setBoxxHeader: PropTypes.func.isRequired,
    }

    handClick = ({ icon, text}) => {
        const { setBoxxHeader, setManiHeader} = this.props
        /*
            这里 两个操作
                1 设置 父组件的header
                2 以及更新 状态 icon
         */
        this.setState({
            icon,
            flag: true
        })
        this.props.setBoxxHeader(text)

    }

    render(){
        const { icon, flag} = this.state
        const headerTitle = flag ?
            (
                <p className='text'>
                    <span>您选择的头像是</span><img src={ icon} />
                </p>
            ):
            (<p className='text'>
                <span>请您选择的头像</span><img src={ icon} className='initImg' />
            </p>)
        return(
        <div>

            <List renderHeader={() => headerTitle}>
                <Grid
                    data={ this.headerImg}
                    columnNum={ 5}
                    onClick = {el => { this.handClick(el)}}
                    />
            </List>
        </div>
        )
    }
}
